<template>
	<view class="wanl-list">

		<view class="cu-custom" :style="{height: wanlsys.height + 'px' }">
			<view class="cu-bar fixed" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input type="text" confirm-type="search" placeholder-style="color: #ccc"
						:placeholder="searchKeywords ? searchKeywords : '搜索关键字'" @confirm="onSearchInputConfirmed"
						 focus />
				</view>
			</view>
		</view>

		<view class="main" :style="{ top: wanlsys.top + 'px' }">
			<wanl-find :dataList="findData" :dataStyle="liststyle" @onFollow="onFollow" @onLike="onLike" />
		</view>

		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeywords: '',
				Opacity: 0,
				wanlsys: this.$wanlshop.wanlsys(),
				height: this.$wanlshop.wanlsys().windowHeight,
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				findData: [], //动态列表数据
				liststyle: 'col-2-20', //列表样式
				reload: false, //判断是否上拉
				page: 1,
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			this.loadData();
		},
		onPageScroll(e) {
			let tmpY = 20 + this.wanlsys.top;
			e.scrollTop = e.scrollTop > tmpY ? tmpY : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.Opacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		// 监听上拉
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.page = this.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		methods: {
			onSearchInputConfirmed(event) {
				let value = event.detail.value;
				if (!value) {
					uni.showModal({
						title: '提示',
						content: '请输入内容。'
					});
					return;
				}
				this.searchKeywords = value;
				this.page = 1;
				this.reload = true;
				this.loadData();
			},
			async loadData() {
				this.$api.get({
					url: '/wanlshop/find/find',
					data: {
						page: this.page,
						type: '',
						searchKeywords:this.searchKeywords
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.status = 'more';
						this.findData = this.reload ? res.data : this.findData.concat(res.data); //数据 追加
						this.page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
					},
				});
			},
			// 关注 & 取消关注
			onFollow(find) {
				find.isFollow = !find.isFollow;
				if (find.isFollow) {
					find.follows += 1;
				} else {
					find.follows -= 1;
				}
				this.$api.post({
					url: '/wanlshop/find/setFollow',
					data: {
						id: find.id
					},
					success: res => {
						find.isFollow = res;
					}
				});
			},
			// 喜欢 & 取消喜欢
			onLike(find) {
				find.isLike = !find.isLike;
				if (find.isLike) {
					find.like += 1;
				} else {
					find.like -= 1;
				}
				this.$api.post({
					url: '/wanlshop/find/setLike',
					data: {
						id: find.id
					},
					success: res => {
						find.isLike = res;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-bar {
		// height: 100upx;
		display: flex;
		align-items: center;
		justify-content: center;

		.publics_nav_item {
			margin-right: 71upx;
			font-size: 30upx;
			font-weight: 400;
			color: #999999;
			// height: 70upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				height: 2px;
				background: #FF6400;
				width: 100%;
				border-radius: 2px;
				position: absolute;
				left: 0;
				bottom: 0;
				display: none;
			}
		}

		.publics_nav_item:last-child {
			margin-right: 0upx;
		}

		.publics_nav_active {
			font-size: 32upx;
			font-weight: 400;
			color: #000000;

			text {
				display: block;
			}


		}
	}

	.find_box {
		height: auto;
		width: 100%;

		.find_box_item {
			width: 345upx;
			height: 100%;
			overflow: hidden;
			padding-bottom: 20upx;
			margin-bottom: 15upx;
			border-radius: 12upx;
			background: #FFFFFF;

			.find_box_item_t {
				width: 100%;
				height: auto;
				overflow: hidden;

				image {
					width: 100%;
					height: auto;
				}
			}

			.find_box_item_name {
				padding: 25upx;
				font-size: 32upx;
				font-weight: 400;
				color: #000000;
				text-overflow: ellipsis;
			}

			.find_box_item_more {
				padding: 10upx 25upx 5upx 25upx;
				height: auto;
				overflow: hidden;
				display: flex;
				align-items: center;

				div {
					display: flex;
					align-items: center;
					margin-right: 40upx;

					image {
						width: 24upx;
						height: 24upx;
					}

					text {
						margin-left: 8upx;
						font-size: 24upx;
						font-weight: 400;
						color: #4F4F4F;
					}
				}
			}
		}


	}
</style>
